<template>
  <div>
    <div class="midd">
      <el-tabs :tab-position="tabPosition" style="height: 200px;">
        <el-tab-pane label="基本信息">
          <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
              <el-form label-width="100px" class="demo-ruleForm">
                <el-form-item label="电话" prop="uesr_pho">
                  <el-input v-model="myselfForm.uesr_pho" readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="user_sex">
                  <el-button type="text">{{myselfForm.user_sex == 0?"男":"女"}}</el-button>
                  <span style="font-size:12px">
                    更改为
                    <i class="el-icon-right"></i>
                  </span>
                  <el-radio v-model="userSex" label="0">男</el-radio>
                  <el-radio v-model="userSex" label="1">女</el-radio>
                </el-form-item>
                <el-form-item label="头像" prop="pic">
                  <img :src="myselfForm.user_pic" alt width="40px" height="40px" />
                  <input
                    prefix-icon="el-icon-picture-outline"
                    type="file"
                    accept="image/*"
                    ref="file"
                    @change="picChange($event)"
                  />
                </el-form-item>
                <el-form-item label="地址" prop="user_adress">
                  <el-input v-model="myselfForm.user_adress"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="editMyself">立即修改</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="修改密码">
          <el-tabs type="border-card">
            <el-tab-pane label="修改密码">
              <el-form :model="passwordFrom" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户账号" prop="phone">
                  <el-input v-model="passwordFrom.phone"></el-input>
                </el-form-item>
                <el-form-item label="旧密码" prop="oldPass">
                  <el-input v-model="passwordFrom.oldPass" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPass">
                  <el-input v-model="passwordFrom.newPass" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="newPassword">
                  <el-input v-model="passwordFrom.newPassword" show-password></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="editPass">立即修改</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="上传作品" v-if="yUser">
          <el-tabs type="border-card">
            <el-tab-pane label="上传作品">
              <el-form ref="form" :model="upLoadForm" label-width="80px">
                <el-form-item label="作品名称">
                  <el-input v-model="upLoadForm.name"></el-input>
                </el-form-item>
                <el-form-item label="作品简介">
                  <el-input type="textarea" v-model="upLoadForm.desc"></el-input>
                </el-form-item>
                <el-form-item label="类别选择">
                  <el-select
                    v-model="upLoadForm.category_name"
                    placeholder="请选择类别"
                    :value="upLoadForm.categoryId"
                  >
                    <el-option
                      v-for="item of categoryList"
                      :key="item.index"
                      :label="item.category_name"
                      :value="item.category_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="作品封面">
                  <input
                    prefix-icon="el-icon-picture-outline"
                    type="file"
                    accept="image/*"
                    ref="file"
                    @change="picChange($event)"
                  />
                </el-form-item>
                <el-form-item label="微课视频">
                  <input type="file" ref="file" @change="videoChange($event)" />
                </el-form-item>
                <el-form-item class="el-form-item-content11">
                  <el-button type="primary" @click="addCollege">立即上传</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="我的作品" v-if="yUser">
          <el-tabs type="border-card">
            <el-tab-pane label="我的作品">
              <div class="tag-group">
                <span class="tag-group__title">类别：</span>
                <el-tag
                  v-for="item in categoryList"
                  :key="item.category_id"
                  effect="plain"
                  @click="tagCat(item.category_id)"
                  style="margin-right:10px;cursor:pointer"
                >{{ item.category_name }}</el-tag>
              </div>
              <div class="text item" style="margin-top:10px">
                <el-row>
                  <el-col
                    :span="8"
                    v-for="item of wksList"
                    :key="item.index"
                    @click="openVideo(item.wk_id)"
                  >
                    <el-card :body-style="{ padding: '0px' }">
                      <img
                        :src="item.wk_pic"
                        class="image"
                        style="width: 257px;display: block;height: 184px;"
                      />
                      <div style="padding: 14px;">
                        <b
                          style="width:155px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis"
                          :title="item.wk_name"
                        >{{item.wk_name}}</b>
                        <span style="float:right;font-size:12px">{{item.wk_create_time}}</span>
                        <div class="bottom clearfix">
                          <b
                            class="time"
                            :style="item.color"
                            style="float:left;padding-top:5px;font-size:14px"
                          >{{item.wk_state}}</b>
                          <el-button
                            type="text"
                            class="button"
                            style="float:right"
                            @click="openVideo(item.wk_id)"
                          >详情</el-button>
                        </div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
              <div class="text item" v-show="wksList.length == 0">暂无此类别微课(*^▽^*)~</div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="cardDetail">
      <el-dialog
        title="作品详情"
        :visible.sync="dialogVisible"
        width="1200px"
        top="4vh"
        :before-close="videoClose"
      >
        <el-card class="box-card">
          <video :src="wkDetail.wk_video_adress" controls id="a1_html5_api" preload="auto"></video>
          <div class="cardddd">
            <b>{{wkDetail.wk_name}}</b>——
            <b style="color:blue">{{wkDetail.category_name}}</b> 类
            <p style="display:flex;justify-content: space-between;">
              <span>作者：{{wkDetail.user_account}}</span>
              <span>时间：{{wkDetail.wk_create_time}}</span>
            </p>
            <p>作品描述：</p>
            <p style="text-indent:30px;">{{wkDetail.wk_introduce}}</p>
          </div>
        </el-card>
        <el-divider content-position="left">
          <i class="el-icon-s-comment"></i>
        </el-divider>
        <div
          class="block demo-drawer__content"
          v-show="dataEV == 1"
          style=" overflow: scroll !important;height:275px"
        >
          <el-timeline>
            <el-timeline-item placement="top" v-for="item of evData" :key="item.inde">
              <el-card>
                <p>
                  <img :src="item.user_pic" alt style="width:20px;hight:20px;border-r" />
                  <span style="padding-left:10px;font-size: 12px;">{{item.user_account}}</span>
                </p>
                <p style="padding-top:5px;font-size:14px">{{item.evaluate_message}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <p v-show="dataEV == 0" style="text-align: left;padding-left: 22px;height:100px">暂无评论(#^.^#)</p>
        <div class="comment">
          <el-divider content-position="left">
            <i class="el-icon-s-comment"></i>发表一条评论
          </el-divider>
          <div style="width:90%;margin:0 auto;overflow: auto">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="evaluateMessage"
              maxlength="130"
              show-word-limit
              style="float:left;width:90%;line-height: normal;"
            ></el-input>
            <el-button
              style="float:right"
              class="el-icon-s-promotion"
              type="primary"
              plain
              @click="putMessage(wkDetail.wk_id)"
            >发表</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      userSex: "",
      leib: "",
      tabPosition: "left",
      passwordFrom: {
        phone: "",
        oldPass: "",
        newPass: "",
        newPassword: ""
      },
      //
      upLoadForm: {
        name: "",
        desc: "",
        category_name: ""
      },
      wksList: [],
      picFile: {},
      videoFile: {},
      myselfForm: {},
      categoryList: [],
      wkscatList: [],
      videoShow: 0,
      wkDetail: {},
      evData: {},
      dataEV: "",
      evaluateMessage: "",
      yUser: true
    };
  },
  mounted() {
    this.getCategory();

    let a = sessionStorage.getItem("user");
    if (a != "undefined") {
      this.myselfForm = JSON.parse(a);
      let user = JSON.parse(a);

      if (user.user_type == 0) {
        this.yUser = false;
      } else if (user.user_type == 1) {
        this.yUser = true;
      }
    } else {
      // let user = JSON.parse(a);
    }

    //console.log(this.myselfForm);
    this.getPersonalwork();
  },
  methods: {
    //类别
    getCategory() {
      var that = this;
      that.$axios
        .get("apis/admin/categorylist")
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              var dataList = res.data.data;
              var catList = [];
              for (var i = 0; i < dataList.length; i++) {
                if (dataList[i].category_name != "学院制作") {
                  catList.push(dataList[i]);
                }
              }
              that.categoryList = catList;
            }
            //console.log(that.categoryList);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //用户修改基本信息
    editMyself() {
      var that = this;
      //console.log(that.myselfForm);
      var parse = new FormData();
      parse.append("uesr_pho", that.myselfForm.uesr_pho);
      parse.append("user_adress", that.myselfForm.user_adress);
      parse.append("user_pic", that.picFile);
      parse.append("user_id", that.myselfForm.user_id);
      parse.append("user_sex", that.userSex);
      //console.log(parse);
      that.$axios
        .post("apis/user/updatemessage", parse)
        .then(function(res) {
          if (res.status == 200) {
            //console.log(res.data);
            if (res.data.status == 1) {
              sessionStorage.setItem("user", JSON.stringify(res.data.data));

              // that.$cookie.set("user", JSON.stringify(res.data.data));
              that.myselfForm = {};
              location.reload();
              that.$message({
                message: "修改成功~",
                type: "success"
              });
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //用户修改密码
    editPass() {
      var that = this;
      if (that.passwordFrom.newPass == that.passwordFrom.newPassword) {
        that.$axios
          .post(
            "apis/user/updatepwd",
            this.$qs.stringify({
              uesr_pho: that.passwordFrom.phone, //管理员账号
              user_newpwd: that.passwordFrom.newPassword,
              user_oldpwd: that.passwordFrom.oldPass
            })
          )
          .then(function(res) {
            //console.log(res);
            if (res.status == 200) {
              if (res.data.status == 1) {
                that.$message({
                  message: "修改成功~",
                  type: "success"
                });
                that.passwordFrom = {};
              } else if (res.data.status == 0) {
                that.$message.error("修改失败~~~");
                that.passwordFrom = {};
              }
            } else {
              that.$message.error("系统出错~~~");
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    //上传视频--用户上传微课
    addCollege() {
      var that = this;
      //console.log(that.upLoadForm);
      var parse = new FormData();
      parse.append("userId ", that.myselfForm.user_id);
      parse.append("categoryId", that.upLoadForm.category_name);
      parse.append("wkIntroduce", that.upLoadForm.desc);
      parse.append("wkName", that.upLoadForm.name);
      parse.append("wkPic", that.picFile);
      parse.append("wkVideo", that.videoFile);
      //console.log(parse);
      const loading = this.$loading({
        lock: true,
        text: "上传Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      that.$axios
        .post("apis/user/uploadwkmessage", parse)
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              loading.close();
              that.upLoadForm = {};
              that.picFile = "";
              that.videoFile = "";
              that.getPersonalwork();
              location.reload();
              that.$message({
                message: "上传成功~",
                type: "success"
              });
            } else {
              that.picFile = "";
              that.videoFile = "";
              that.upLoadForm = {};
              that.$message.error("错了哦，系统出错~");
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //获取图片对象文件
    picChange(e) {
      var that = this;
      that.picFile = e.target.files[0];
      //console.log(that.picFile);
    },
    //获取图片对象文件
    videoChange(e) {
      var that = this;
      that.videoFile = e.target.files[0];
    },
    //类别列表点击
    tagCat(id) {
      //console.log(id);
      var that = this;
      var catList = that.wkscatList;
      //console.log(catList);

      var lbList = [];
      for (var i = 0; i < catList.length; i++) {
        if (id == catList[i].category_id) {
          lbList.push(catList[i]);
        }
      }
      that.wksList = lbList;
      //console.log(lbList);
    },
    //获取用户作品
    getPersonalwork() {
      var that = this;
      var parse = {
        userId: that.myselfForm.user_id
      };
      that.$axios
        .post("apis/user/personalwork", this.$qs.stringify(parse))
        .then(function(res) {
          if (res.status == 200) {
            if (res.data.status == 1) {
              var dataList = res.data.data;
              for (var i = 0; i < dataList.length; i++) {
                dataList[i].wk_create_time = that
                  .$moment(dataList[i].wk_create_time)
                  .format("YYYY-MM-DD");
                if (dataList[i].wk_state == 0) {
                  dataList[i].wk_state = "未审核";
                  dataList[i].color = "color:#e6a23c";
                } else if (dataList[i].wk_state == 1) {
                  dataList[i].wk_state = "通过审核";
                  dataList[i].color = "color:#67c23a";
                } else if (dataList[i].wk_state == 2) {
                  dataList[i].wk_state = "未通过审核";
                  dataList[i].color = "color:#f56c6c";
                }
              }
              that.wksList = dataList;
              that.wkscatList = dataList;
            } else {
              that.$message.error("错了哦，系统出错~");
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //打开详情
    openVideo(id) {
      var that = this;
      that.$axios
        .post(
          "apis/user/personalwkdetail",
          this.$qs.stringify({
            wkId: id
          })
        )
        .then(function(res) {
          if (res.status == 200) {
            //console.log(res.data);
            var dataList = res.data.data.wk;
            that.dialogVisible = true;
            dataList.wk_create_time = that
              .$moment(dataList.wk_create_time)
              .format("YYYY-MM-DD");

            that.wkDetail = dataList;
            if (res.data.data.wk_evaluates.length != 0) {
              that.dataEV = 1;
              that.evData = res.data.data.wk_evaluates;
            } else if (res.data.data.wk_evaluates.length == 0) {
              that.dataEV = 0;
            }
            that.$message({
              message: "详情查询成功~~~~",
              type: "success"
            });
            // if (res.data.status == 1) {
            //   var dataList = res.data.data.wk;
            //   if (dataList == null) {
            //     that.$message({
            //       message: "视频未审核不能查看",
            //       type: "warning"
            //     });
            //   } else {
            //     that.dialogVisible = true;
            //     dataList.wk_create_time = that
            //       .$moment(dataList.wk_create_time)
            //       .format("YYYY-MM-DD");

            //     that.wkDetail = dataList;
            //     if (res.data.data.wk_evaluates.length != 0) {
            //       that.dataEV = 1;
            //       that.evData = res.data.data.wk_evaluates;
            //     } else if (res.data.data.wk_evaluates.length == 0) {
            //       that.dataEV = 0;
            //     }
            //     that.$message({
            //       message: "详情查询成功~~~~",
            //       type: "success"
            //     });
            //   }
            // }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //发表
    putMessage(id) {
      //console.log(id);
      let a = sessionStorage.getItem("user");
      if (a != "undefined") {
        var that = this;
        that.$axios
          .post(
            "apis/user/addevaluate",
            this.$qs.stringify({
              wkId: id,
              evaluateMessage: that.evaluateMessage,
              userId: that.myselfForm.user_id
            })
          )
          .then(function(res) {
            if (res.status == 200) {
              //console.log(res.data);

              if (res.data.status == 1) {
                that.openVideo(id);
                that.evaluateMessage = "";
                that.$message({
                  message: "评论发表成功~~~",
                  type: "success"
                });
              }
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    },
    videoClose() {
      this.dialogVisible = false;
      var video = document.getElementById("a1_html5_api");
      video.pause(); //暂停控制
    }
  }
};
</script>

<style lang="less" scoped>
.midd {
  width: 1200px;
  margin: 10px auto;
  .el-form {
    width: 50%;
  }
  .el-col-8 {
    width: 21.7%;
    margin: 10px 5px;
  }
  .el-form-item-content11 {
    margin-left: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }
}
.el-tabs {
  height: 800px !important;
}
.cardDetail {
  .el-card {
    width: 100%;
    .el-card__body {
      // width: 600px !important;
    }
    video {
      width: 55%;
      float: left;
      padding-bottom: 20px;
    }
    .cardddd {
      width: 40%;
      float: right;
    }
  }
  .block {
    width: 95%;
    margin: 0 auto;
    .el-card {
      width: 80% !important;
      .el-card__body {
        text-align: left !important;
        padding: 10px;
      }
      .el-icon-delete:hover {
        color: red;
      }
      p {
        margin: 0 !important;
      }
    }
    .el-timeline-item {
      padding-bottom: 0;
    }
  }
  .comment {
    background: #fff;
    margin-top: -41px;
  }
}
</style>